import {DownloadOutlined} from '@ant-design/icons';
import {Button, Divider, Image, message, Modal} from 'antd';
import React, {useState, useRef, useEffect, Component} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import {recordList, exportRecord,getFiles} from './service';

import Access from '@/components/Access/Access';

import CreateForm from "./components/CreateForm";

import "./index.css";


import styles from "@/global.less";

import {saveFileAs} from "@/utils/utils";

const TableList = (props) => {
  const actionRef = useRef();
  const [count, setCount] = useState();

  const [exportModalVisible, handleModalVisible] = useState(false);
  const [imgDetail, handleImgDetail] = useState(false);
  const [inStockInfo, handleInStockInfo] = useState({});
  useEffect(() => {

  }, []);


  const columns = [

    {
      title: '品名',
      dataIndex: 'goodsName',

    },
    {
      title: '分类',
      dataIndex: 'categoryName',
    },
    {
      title: '条码',
      dataIndex: 'barCode',

    },
    {
      title: '仓库',
      dataIndex: 'houseName',
      hideInSearch: true,
    },
    {
      title: '数量',
      dataIndex: 'stock',
      hideInSearch: true,
    },

    {
      title: '原因',
      dataIndex: 'bizType',
      valueEnum: {
        0: {
          text: '仓库管理',
          status: 'Error',
        },
        1: {
          text: '门店采购',
          status: 'Processing',
        },
        7: {
          text: '原料采购',
          status: 'Processing',
        },
        8: {
          text: '原料领用',
          status: 'Processing',
        },
        100: {
          text: '老模式',
          status: 'Processing',
        },
        30: {
          text: '成品',
          status: 'Processing',
        },
        40: {
          text: '退货',
          status: 'Processing',
        },
      },
    },
    {
      title: '类型',
      dataIndex: 'type',
      hideInSearch: true,
      valueEnum: {
        true: {
          text: '出库',
          status: 'Error',
        },
        false: {
          text: '入库',
          status: 'Processing',
        },
      },
    },
    {
      title: '关联信息',
      dataIndex: 'remake',
      hideInSearch: true,
    },
    {
      title: '操作时间',
      dataIndex: 'createTime',
      hideInSearch: true,
    },
    {
      title: '操作人员',
      dataIndex: 'outer',
      hideInSearch: true,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      fixed: 'right',
      render: (_, record) => {
        return (
          <>
            <div style={{
              display: "flex",
              overflow: "hidden"
            }}>
              <Access accessKey={"@stockRecord_imgs"}>
                <Button
                  type="primary"
                  style={{
                    marginLeft: "10px"
                  }}
                  onClick={() => {
                    getFiles(record).then(res=>{
                      handleInStockInfo(res.data);
                      handleImgDetail(true);
                    })
                  }}
                >
                  查看凭据
                </Button>
              </Access>
            </div>
          </>
        );
      },
    },
  ];

  const outColumns = [
    {
      title: '操作时间',
      dataIndex: 'checkDate',
      valueType: 'dateRange',
      search: {
        transform: (value) => {
          return {
            startTime: value[0],
            endTime: value[1],
          };
        },
      },
      formItemProps: {
        rules: [
          {
            required: true,
            message: '操作时间为必选项',
          },
        ],
      },
    },
  ];



  return (
    <PageContainer>
      <ProTable
        headerTitle="变动记录"
        actionRef={actionRef}
        rowKey="id"
        search={{
          labelWidth: 120,
        }}
        scroll={{x: 1400}}
        bordered
        request={(params, sorter, filter) => recordList({...params, sorter, filter})}
        postData={(payload) => {
          const {list, total} = payload;
          setCount(total);
          return list || [];
        }}
        toolBarRender={() => [
          <Access accessKey={"@stockRecord_export"}>
            <Button
              key="stockRecord_export"
              type="primary"
              onClick={() => {
                handleModalVisible(true);
              }}
            >
              <DownloadOutlined/> 导出
            </Button>
          </Access>

        ]}
        columns={columns}
        pagination={{
          defaultPageSize: 30,
          showSizeChanger: false,
          showTitle: false,
          total: count,
          showTotal: (total) => `共${total}条`,
        }}
      />
      <CreateForm
        title={'导出信息'}
        width={800}
        btn_view={null}
        onCancel={() => {
          handleModalVisible(false);
        }}
        modalVisible={exportModalVisible}
      >
        <ProTable
          className={styles.formModal}
          onSubmit={(value) => {
            handleModalVisible(false);
            exportRecord(value).then(res=>{
              if (res){
                saveFileAs(res, '库存变动记录');
              }
            })
          }}
          rowKey={r=>r.id}
          bordered
          type="form"
          columns={outColumns}
          form={{
            layout: 'horizontal ',
            labelAlign: 'rihgt',
            labelCol: {span: 8},
            wrapperCol: {span: 24},
          }}
        />
      </CreateForm>
      <CreateForm
        width={800}
        onCancel={() => handleImgDetail(false)}
        modalVisible={imgDetail}
        btn_view={false}
      >
        <div style={{width: '100%', height: '100%'}}>
          <Divider orientation="left">附件</Divider>
          <Image.PreviewGroup>
            {
              inStockInfo.fileUrls?.map(img => {
                return <Image key={img} width={100} height={100} src={img}/>
              })
            }
          </Image.PreviewGroup>
          <Divider orientation="left">备注</Divider>
          {
            inStockInfo.remake
          }
        </div>
      </CreateForm>
    </PageContainer>
  );
};

export default TableList;
